<template>
  <div class="video-info-container">
    <el-form :inline="true" :model="queryParams">
      <section class="justify-align">
        <div>
          <el-form-item>
            <el-button v-if="checkAuthority('/down')" type="primary" @click="downloadTemplate">下载模板</el-button>
            <el-upload
              style="display: inline; margin-left: 10px"
              action="string"
              :show-file-list="false"
              :http-request="handleBatchImport"
              :before-upload="beforeUpload"
            >
              <el-button v-if="checkAuthority('/import')" type="primary">批量导入</el-button>
            </el-upload>
          </el-form-item>
        </div>
        <div>
          <el-form-item class="eqpt-label">
            <select-tree
              :width="200"
              :isNodeParams="true"
              placeholder="请选择设备标签"
              v-model="queryParams.labelIdList"
              :departments="eaptLabelTreeList"
            />
          </el-form-item>
          <el-form-item>
            <el-cascader
              placeholder="请选择设备地点"
              v-model="queryParams.areaList"
              :options="eqptAddressData"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryParams.eqptName" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="checkAuthority('/select')" type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </div>
      </section>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="index"
        type="index"
        label="序号"
        width="100"
      >
        <template slot-scope="scope">
          {{ pageSize * (pageNum - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="sourceId"
        label="视频设备编号">
      </el-table-column>
      <el-table-column
        prop="eqptName"
        label="视频设备名称">
      </el-table-column>
      <el-table-column
        prop="eqptAdress"
        show-overflow-tooltip
        label="地点">
      </el-table-column>
      <el-table-column
        prop="labelTreeName"
        label="标签">
        <template #default="{ row }">
          <ul v-for="(item, index) in row.labelTreeName" :key="index">
            <el-tooltip effect="dark" :content="item" placement="top">
              <div class="ellipsis">{{ item }}</div>
            </el-tooltip>
          </ul>
        </template>
      </el-table-column>
      <el-table-column
        prop="hlsFlow"
        show-overflow-tooltip
        label="视频流HLS协议">
      </el-table-column>
      <el-table-column
        prop="rtmpFlow"
        show-overflow-tooltip
        label="视频流RTMP协议">
      </el-table-column>
      <el-table-column
        prop="rtspFlow"
        show-overflow-tooltip
        label="视频流RTSP协议">
      </el-table-column>
      <el-table-column
        prop="action"
        label="操作">
        <template #default="{ row }">
          <el-button v-if="checkAuthority('/editor')" type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button v-if="checkAuthority('/delete')" type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right"
      v-if="tableData.length > 0"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
    <!-- 视频流信息modal框 -->
    <video-info-modal
      :flow-info-modal="flowInfoModal"
      v-if="flowInfoModal.show"
      :eaptLabelTreeList="eaptLabelTreeList"
      :eqptAddressData="eqptAddressData"
      @save="handleModalSave"
      @close="handleModalClose"
    />
  </div>
</template>

<script>
import VideoInfoModal from './videoInfoModal.vue'
import SelectTree from '@/components/selectTree'
import {
  getEqptLabelTreeList,
  queryVideoEqptData,
  deleteVideoEqpt,
  updateVideoEqpt,
  downloadTemplate,
  batchImport
} from '../js/videoCenter'
import { getFloorTreeList } from '../../lot/js/spaceShow'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  components: {
    VideoInfoModal,
    SelectTree
  },
  data: () => ({
    queryParams: {
      labelIdList: [],
      eqptName: '',
      areaList: []
    },
    pageNum: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    flowInfoModal: {
      show: false,
      title: '',
      row: {}
    },
    eaptLabelTreeList: [],
    eqptAddressData: []
  }),
  methods: {
    checkAuthority,
    handleSearch () {
      this.pageNum = 1
      this.getTableData()
    },
    downloadTemplate () {
      downloadTemplate()
    },
    async handleBatchImport (params) {
      try {
        const formData = new FormData()
        formData.append('file', params.file)
        const res = await batchImport(formData)
        if (res.code === 0) {
          this.$message.success('导入成功！')
          this.handleSearch()
        }
      } catch (e) {}
    },
    beforeUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 200
      if (!extension && !extension2) {
        this.$message.warning('导入模板只能是xls、xlsx格式!')
        return false
      } else if (!isLt2M) {
        this.$message.warning('导入模板大小不能超过 200MB!')
        return false
      }
    },
    handleEdit (row) {
      // 列表行内编辑
      this.flowInfoModal.show = true
      this.flowInfoModal.title = '编辑视频流信息'
      this.flowInfoModal.row = row
    },
    async handleModalSave (item) {
      const {
        videoEqptId,
        labelTree,
        hlsFlow,
        rtmpFlow,
        rtspFlow
      } = item
      try {
        if (this.flowInfoModal.title === '编辑视频流信息') {
          const labelIdList = labelTree?.length ? labelTree.filter(n => !n.children).map(n => n.id) : []
          const res = await updateVideoEqpt({
            videoEqptId,
            labelTree,
            hlsFlow,
            rtmpFlow,
            rtspFlow,
            labelIdList
          })
          if (res.code === 0) {
            this.$message.success('编辑视频流信息成功')
            this.getTableData()
          }
        }
      } catch (e) {}
    },
    handleModalClose () {
      this.flowInfoModal.show = false
    },
    async getEqptLabelTreeList () {
      try {
        const res = await getEqptLabelTreeList()
        if (res.code === 0) {
          this.eaptLabelTreeList = res.data
        }
      } catch (e) {}
    },
    async getFloorTreeList () {
      try {
        const res = await getFloorTreeList({
          parentId: 0
        })
        if (res.code === 0) {
          this.eqptAddressData = this.getNewFloorTreeData(res.data)
        }
      } catch (e) {}
    },
    getNewFloorTreeData (data) {
      if (data?.length) {
        data.forEach(n => {
          n.label = n.name
          n.value = n.id
          if (n?.children?.length) {
            this.getNewFloorTreeData(n.children)
          } else {
            n.children = null
          }
        })
      }
      return data
    },
    handleDelete (row) {
      // 列表行内删除
      this.$confirm('确定删除该视频流设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteVideoEqpt(row.videoEqptId)
        if (res.code === 0) {
          this.getTableData()
          this.$message.success('删除成功！')
        } else {
          this.$message.error('删除失败！')
        }
      })
    },
    handleCurrentChange (pageNum) {
      // 分页
      this.pageNum = pageNum
      this.getTableData()
    },
    async getTableData () {
      // 获取列表数据
      this.queryParams.labelIdList = this.queryParams.labelIdList.filter(n => !n.children).map(n => n.id)
      try {
        const res = await queryVideoEqptData({
          ...this.queryParams,
          current: this.pageNum,
          pageSize: this.pageSize
        })
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.getEqptLabelTreeList()
    this.getFloorTreeList()
    this.handleSearch()
  }
}
</script>

<style lang="scss" scoped>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
::v-deep .eqpt-label .el-form-item__content, .el-select, .el-cascader {
  width: 200px;
}
</style>
